<div id="container" >
  <main>
    <header>
      <div>
        <h2>Chat with Vincent Porter</h2>
        <h3>{{mynickname}}  id  {{myuserid}}</h3>
      </div>
    </header>

      <div>
    <ul id="chat"  #scrollMe>
      <div *ngFor="let m of ml;index as index">

        <li tabindex="{{index}}" class="you" *ngIf="m.fromuserid!=myuserid">
          <div class="entete">
            <span class="status green"></span>
            <h2>{{m.fromusernikename}}</h2>
            <h3>{{m.senddate | date:'yyyy-MM-dd HH:mm:ss'}}</h3>
          </div>
          <div class="triangle"></div>
          <div class="message">
           {{m.content}}
          </div>
        </li>
        <li class="me" *ngIf="m.fromuserid==myuserid">
          <div class="entete">
            <h3>{{m.senddate | date:'yyyy-MM-dd HH:mm:ss'}}</h3>
            <h2>{{m.fromusernikename}}</h2>
            <span class="status blue"></span>
          </div>
          <div class="triangle"></div>
          <div class="message">
            {{m.content}}
          </div>
        </li>
      </div>


    </ul>
      </div>
    <footer>
      <textarea placeholder="Type your message" [(ngModel)]="inputtext"></textarea>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
      <a (click)="sendTextMessage()">Send</a>
    </footer>


  </main>


</div>
